.welcome-hero {
  background-color: $primary-color;
  padding: 2rem;
  font-family:  Helvetica, Arial, sans-serif;

  .welcome-hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;

    @include breakpoint(medium down) {
      display: block;
    }
  }

  .welcome-hero-message {
    flex: 1 0 0;

    + .welcome-hero-video {
      padding-left: 2rem;

      @include breakpoint(medium down) {
        padding-left: 0;
      }
    }

    @include breakpoint(medium down) {
      margin-bottom: 2rem;
    }
  }

  .welcome-hero-video {
    flex: 1 0 0;

    .responsive-embed {
      margin-bottom: 0;
    }
  }

  .welcome-hero-title {
    color: $white;
    line-height: 3.2rem;
    margin-bottom: 1rem;
    font-family: Helvetica, Arial, sans-serif;

    @include breakpoint(small down) {
      font-size: 2rem;
      line-height: 1.3;
      text-align: center;
    }
  }

  .welcome-hero-lead {
    color: lighten($primary-color, 40%);
    font-size: 1.25rem;
    line-height: 1.5;
    margin-bottom: 0;

    @include breakpoint(small down) {
      text-align: center;
    }
  }
}
